<template>
  <div>
    <div class="d-flex align-item-center mb-1">
      <div class="flex-grow-1">项目分析</div>
    </div>
    <el-echarts
      :option="option"
      ref="echarts"
      theme="macarons"
      @onInit="onInit"
      :height="240"
    ></el-echarts>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { echartsXFormatter } from '@vimi/utils-tool'

export default {
  components: {},
  props: {},
  data() {
    return {
      orgClass: '',
      chart: {},
      option: null,
      level: 0,
      cityData: [],
      countyData: [],
      tableName: 'loan_total_bank_view',
    }
  },
  computed: {
    ...mapGetters(['user', 'clientId', 'org']),
    orgCode() {
      return this.org.orgCode
    },
  },
  watch: {},
  created() {
    this.orgClass = this.$utils.getClientOrgClass()
    this.getData()
  },
  mounted() {},
  methods: {
    onInit(chart) {
      this.chart = chart
    },
    async getData() {
      const sumKeys = [
        'loan_on_total',
        'loan_un_total',
        'loan_new_total',
        'loan_ex_total',
        'loan_on_funds',
        'loan_un_funds',
        'loan_new_funds',
        'loan_ex_funds',
      ]
      const groupFunc = sumKeys
        .reduce((a, b) => {
          a.push(`round(sum(${b})|2)`)
          return a
        }, [])
        .join(',')
      const params = {
        isBIQuery: 1,
        'bank_code.endlike': this.orgCode,
        groupFunc: groupFunc,
      }
      const [res, err] = await this.fetchData(params)
      this.cityData = res.data || {}
      if (err) {
        this.$message.error('请求数据失败，请重试！')
      }
      this.setCity()
    },
    setCity() {
      const aData = []
      const bData = []
      const item = this.cityData[0] || {}

      aData.push(item.p)
      aData.push(item.p1)
      aData.push(item.p2)
      aData.push(item.p3)
      bData.push(item.p4)
      bData.push(item.p5)
      bData.push(item.p6)
      bData.push(item.p7)
      this.setOption({ aData, bData })
    },
    fetchData(params) {
      return this.$utils.promise(this.$api.getData(this.$serviceName, this.tableName, params))
    },
    setOption(option) {
      this.option = {
        title: {
          text: '项目分析',
          show: false,
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['项目数量', '项目金额'],
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        grid: {
          left: 50,
          right: 50,
        },
        xAxis: [
          {
            type: 'category',
            data: ['在保项目', '本年累计解保项目', '本年累计新增项目', '异常项目'],
            axisLabel: {
              formatter: v => echartsXFormatter(v, 8),
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
          },
          {
            type: 'value',
            name: '金额',
          },
        ],
        series: [
          {
            name: '项目数量',
            type: 'bar',
            data: option.aData,
            label: { show: true, position: 'top', formatter: '{c}个' },
            barMaxWidth: 40,
          },
          {
            name: '项目金额',
            type: 'line',
            data: option.bData,
            yAxisIndex: 1,
            label: { show: true, position: 'right', formatter: '{c}万元', color: '#8e44ad' },
          },
        ],
      }
    },
  },
}
</script>
<style scoped></style>
